<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Chartkick</title>

    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

    <!--
    <script crossorigin src="https://unpkg.com/react@15/dist/react-with-addons.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    -->

    <script src="https://unpkg.com/chart.js@4.4.6/dist/chart.umd.js"></script>
    <script src="https://unpkg.com/chartjs-adapter-date-fns@3.0.0/dist/chartjs-adapter-date-fns.bundle.js"></script>
    <script src="https://unpkg.com/chartkick@5.0.1"></script>
    <script src="../dist/react-chartkick.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      const { LineChart, PieChart } = ReactChartkick;
      const { createRoot } = ReactDOM;

      class App extends React.Component {
        constructor() {
          super()
          this.state = {data: [["Jan", 4], ["Feb", 2], ["Mar", 10], ["Apr", 5], ["May", 3], ["Jun", 8], ["Jul", 4]]}

          this.chartRef = (element) => {
            console.log(element)
          }
        }

        componentDidMount() {
          const boom = () => this.setState({data: [...this.state.data, ["Aug", 10]], download: true, id: "chart-99"})
          setTimeout(boom, 1000)
        }

        render() {
          return (
            <React.StrictMode>
              <div>
                <LineChart id={this.state.id} innerRef={this.chartRef} data={this.state.data} download={this.state.download} prefix="$" />
                <PieChart data={this.state.data} />
              </div>
            </React.StrictMode>
          )
        }
      }

      const root = createRoot(document.getElementById("root"));
      root.render(<App />);
    </script>
  </body>
</html>
